﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webdesk icon example</title>
<style type="text/css">
@font-face {
	font-family: "webdesk_icon";
	src:  url("webdesk.woff") format("woff");
}
.icon {
	font-family: "webdesk_icon" !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 42px;
	line-height: 100px;
	margin: 10px 0;
	color: #333;
	-webkit-transition: font-size 0.25s ease-out 0s;
	-moz-transition: font-size 0.25s ease-out 0s;
	transition: font-size 0.25s ease-out 0s;
	cursor:pointer;
}
ol, ul {
	list-style: none;
}
.iconfont-list li {
	float: left;
	width: 100px;
	height: 150px;
	text-align: center;
}
.icon:hover {
	font-size: 100px;
}
.iconfont-list .code {
	color: green;
	font-weight: bold;
	cursor:pointer;
}
</style>
</head>
<body>
    <div class="main">
        <h1>webdeskUI icon example</h1>
        <ul class="iconfont-list">

            <li>
                <i class="icon icon-zuidahua"></i>
                <div class="code">\e6c4</div>
                <div class="name">zuidahua</div>
            </li>

            <li>
                <i class="icon icon-zhiding"></i>
                <div class="code">\e618</div>
                <div class="name">zhiding</div>
            </li>

            <li>
                <i class="icon icon-suofang"></i>
                <div class="code">\e614</div>
                <div class="name">suofang</div>
            </li>

            <li>
                <i class="icon icon-zuidahua1"></i>
                <div class="code">\e693</div>
                <div class="name">zuidahua1</div>
            </li>

            <li>
                <i class="icon icon-guanbi"></i>
                <div class="code">\e606</div>
                <div class="name">guanbi</div>
            </li>

            <li>
                <i class="icon icon-yidong"></i>
                <div class="code">\e69b</div>
                <div class="name">yidong</div>
            </li>

            <li>
                <i class="icon icon-zuixiaohua"></i>
                <div class="code">\e600</div>
                <div class="name">zuixiaohua</div>
            </li>

            <li>
                <i class="icon icon-guding"></i>
                <div class="code">\e6bd</div>
                <div class="name">guding</div>
            </li>

            <li>
                <i class="icon icon-shichuang"></i>
                <div class="code">\e77c</div>
                <div class="name">shichuang</div>
            </li>

            <li>
                <i class="icon icon-weisha"></i>
                <div class="code">\e77d</div>
                <div class="name">weisha</div>
            </li>

            <li>
                <i class="icon icon-weishakeji"></i>
                <div class="code">\e77e</div>
                <div class="name">weishakeji</div>
            </li>

            <li>
                <i class="icon icon-jishi-copy-copy"></i>
                <div class="code">\e601</div>
                <div class="name">jishi-copy-copy</div>
            </li>

            <li>
                <i class="icon icon-yemian"></i>
                <div class="code">\e72f</div>
                <div class="name">yemian</div>
            </li>

            <li>
                <i class="icon icon-loading"></i>
                <div class="code">\e621</div>
                <div class="name">loading</div>
            </li>

            <li>
                <i class="icon icon-hezi"></i>
                <div class="code">\a001</div>
                <div class="name">hezi</div>
            </li>

            <li>
                <i class="icon icon-hezi_1"></i>
                <div class="code">\a002</div>
                <div class="name">hezi_1</div>
            </li>

            <li>
                <i class="icon icon-xuanxiang-"></i>
                <div class="code">\a003</div>
                <div class="name">xuanxiang-</div>
            </li>

            <li>
                <i class="icon icon-xuanxiangka"></i>
                <div class="code">\a004</div>
                <div class="name">xuanxiangka</div>
            </li>

            <li>
                <i class="icon icon-down"></i>
                <div class="code">\a006</div>
                <div class="name">down</div>
            </li>

            <li>
                <i class="icon icon-fuhao-xuanxiangqia"></i>
                <div class="code">\a008</div>
                <div class="name">fuhao-xuanxiangqia</div>
            </li>

            <li>
                <i class="icon icon-xuanxiangka"></i>
                <div class="code">\a007</div>
                <div class="name">xuanxiangka</div>
            </li>

            <li>
                <i class="icon icon-xialacaidan"></i>
                <div class="code">\a005</div>
                <div class="name">xialacaidan</div>
            </li>

            <li>
                <i class="icon icon-shuxingtu"></i>
                <div class="code">\a009</div>
                <div class="name">shuxingtu</div>
            </li>

            <li>
                <i class="icon icon-shuaxin"></i>
                <div class="code">\e694</div>
                <div class="name">shuaxin</div>
            </li>

            <li>
                <i class="icon icon-UI"></i>
                <div class="code">\a010</div>
                <div class="name">UI</div>
            </li>

            <li>
                <i class="icon icon-shuaxin"></i>
                <div class="code">\e695</div>
                <div class="name">shuaxin</div>
            </li>

            <li>
                <i class="icon icon-zhuidahua"></i>
                <div class="code">\697</div>
                <div class="name">zhuidahua</div>
            </li>

            <li>
                <i class="icon icon-huanyuan_1"></i>
                <div class="code">\a012</div>
                <div class="name">huanyuan_1</div>
            </li>

            <li>
                <i class="icon icon-huanyuan_2"></i>
                <div class="code">\a013</div>
                <div class="name">huanyuan_2</div>
            </li>

            <li>
                <i class="icon icon-huanyuan_3"></i>
                <div class="code">\a014</div>
                <div class="name">huanyuan_3</div>
            </li>

            <li>
                <i class="icon icon-spread0000"></i>
                <div class="code">\a011</div>
                <div class="name">spread0000</div>
            </li>

            <li>
                <i class="icon icon-zhedie"></i>
                <div class="code">\a016</div>
                <div class="name">zhedie</div>
            </li>

            <li>
                <i class="icon icon-caidan_xiangmuguanli"></i>
                <div class="code">\a017</div>
                <div class="name">caidan_xiangmuguanli</div>
            </li>

            <li>
                <i class="icon icon-caidan-xiangmu"></i>
                <div class="code">\a018</div>
                <div class="name">caidan-xiangmu</div>
            </li>

            <li>
                <i class="icon icon-xuanxiang"></i>
                <div class="code">\a015</div>
                <div class="name">xuanxiang</div>
            </li>

            <li>
                <i class="icon icon-index"></i>
                <div class="code">\a019</div>
                <div class="name">index</div>
            </li>

            <li>
                <i class="icon icon-shouye"></i>
                <div class="code">\a020</div>
                <div class="name">shouye</div>
            </li>

            <li>
                <i class="icon icon-page"></i>
                <div class="code">\a021</div>
                <div class="name">page</div>
            </li>

            <li>
                <i class="icon icon-yemian"></i>
                <div class="code">\a022</div>
                <div class="name">yemian</div>
            </li>

            <li>
                <i class="icon icon-hanshu"></i>
                <div class="code">\a023</div>
                <div class="name">hanshu</div>
            </li>

            <li>
                <i class="icon icon-shijian"></i>
                <div class="code">\a024</div>
                <div class="name">shijian</div>
            </li>

            <li>
                <i class="icon icon-shuxing"></i>
                <div class="code">\a025</div>
                <div class="name">shuxing</div>
            </li>

            <li>
                <i class="icon icon-bangzhu"></i>
                <div class="code">\a026</div>
                <div class="name">bangzhu</div>
            </li>

            <li>
                <i class="icon icon-banquan"></i>
                <div class="code">\a027</div>
                <div class="name">banquan</div>
            </li>

            <li>
                <i class="icon icon-banquan2"></i>
                <div class="code">\a028</div>
                <div class="name">banquan2</div>
            </li>

            <li>
                <i class="icon icon-chaolianjie"></i>
                <div class="code">\a029</div>
                <div class="name">chaolianjie</div>
            </li>

            <li>
                <i class="icon icon-gongjutiao"></i>
                <div class="code">\a030</div>
                <div class="name">gongjutiao</div>
            </li>

            <li>
                <i class="icon icon-icon_yejianmoshi"></i>
                <div class="code">\a032</div>
                <div class="name">icon_yejianmoshi</div>
            </li>

            <li>
                <i class="icon icon-jiaoben"></i>
                <div class="code">\a033</div>
                <div class="name">jiaoben</div>
            </li>

            <li>
                <i class="icon icon-kaiyuan"></i>
                <div class="code">\a034</div>
                <div class="name">kaiyuan</div>
            </li>

            <li>
                <i class="icon icon-login"></i>
                <div class="code">\a035</div>
                <div class="name">login</div>
            </li>

            <li>
                <i class="icon icon-mima"></i>
                <div class="code">\a036</div>
                <div class="name">mima</div>
            </li>

            <li>
                <i class="icon icon-shengming"></i>
                <div class="code">\a037</div>
                <div class="name">shengming</div>
            </li>

            <li>
                <i class="icon icon-shezhi"></i>
                <div class="code">\a038</div>
                <div class="name">shezhi</div>
            </li>

            <li>
                <i class="icon icon-shijian"></i>
                <div class="code">\a039</div>
                <div class="name">shijian</div>
            </li>

            <li>
                <i class="icon icon-tuichudenglu"></i>
                <div class="code">\a040</div>
                <div class="name">tuichudenglu</div>
            </li>

            <li>
                <i class="icon icon-xiugaixinxi"></i>
                <div class="code">\a041</div>
                <div class="name">xiugaixinxi</div>
            </li>

            <li>
                <i class="icon icon-yanzhengma"></i>
                <div class="code">\a042</div>
                <div class="name">yanzhengma</div>
            </li>

            <li>
                <i class="icon icon-zhanghao"></i>
                <div class="code">\a043</div>
                <div class="name">zhanghao</div>
            </li>

            <li>
                <i class="icon icon-banquan3"></i>
                <div class="code">\a045</div>
                <div class="name">banquan3</div>
            </li>

            <li>
                <i class="icon icon-guanyu"></i>
                <div class="code">\a031</div>
                <div class="name">guanyu</div>
            </li>

            <li>
                <i class="icon icon-pifu"></i>
                <div class="code">\a044</div>
                <div class="name">pifu</div>
            </li>

            <li>
                <i class="icon icon-dayinji"></i>
                <div class="code">\a046</div>
                <div class="name">dayinji</div>
            </li>

            <li>
                <i class="icon icon-dianhua"></i>
                <div class="code">\a047</div>
                <div class="name">dianhua</div>
            </li>

            <li>
                <i class="icon icon-duihao"></i>
                <div class="code">\a048</div>
                <div class="name">duihao</div>
            </li>

            <li>
                <i class="icon icon-huadong"></i>
                <div class="code">\a049</div>
                <div class="name">huadong</div>
            </li>

            <li>
                <i class="icon icon-yanzhengma"></i>
                <div class="code">\a050</div>
                <div class="name">yanzhengma</div>
            </li>

            <li>
                <i class="icon icon-kehuguanli"></i>
                <div class="code">\e67d</div>
                <div class="name">kehuguanli</div>
            </li>

            <li>
                <i class="icon icon-fabu"></i>
                <div class="code">\e64d</div>
                <div class="name">fabu</div>
            </li>

            <li>
                <i class="icon icon-git"></i>
                <div class="code">\e715</div>
                <div class="name">git</div>
            </li>

            <li>
                <i class="icon icon-github"></i>
                <div class="code">\e691</div>
                <div class="name">github</div>
            </li>

            <li>
                <i class="icon icon-kehu"></i>
                <div class="code">\e804</div>
                <div class="name">kehu</div>
            </li>

            <li>
                <i class="icon icon-fuwuqi"></i>
                <div class="code">\e6a4</div>
                <div class="name">fuwuqi</div>
            </li>

            <li>
                <i class="icon icon-yaoqingdaoshi"></i>
                <div class="code">\e640</div>
                <div class="name">yaoqingdaoshi</div>
            </li>

            <li>
                <i class="icon icon-gongdan"></i>
                <div class="code">\e667</div>
                <div class="name">gongdan</div>
            </li>

            <li>
                <i class="icon icon-gitee-fill-round"></i>
                <div class="code">\e686</div>
                <div class="name">gitee-fill-round</div>
            </li>

            <li>
                <i class="icon icon-uniE6F1"></i>
                <div class="code">\e6f1</div>
                <div class="name">uniE6F1</div>
            </li>

            <li>
                <i class="icon icon-get"></i>
                <div class="code">\e61e</div>
                <div class="name">get</div>
            </li>

            <li>
                <i class="icon icon-zhifubao"></i>
                <div class="code">\e602</div>
                <div class="name">zhifubao</div>
            </li>

            <li>
                <i class="icon icon-yinxingqia"></i>
                <div class="code">\e60f</div>
                <div class="name">yinxingqia</div>
            </li>

            <li>
                <i class="icon icon-gouwuche"></i>
                <div class="code">\e652</div>
                <div class="name">gouwuche</div>
            </li>

            <li>
                <i class="icon icon-rmb"></i>
                <div class="code">\e624</div>
                <div class="name">rmb</div>
            </li>

            <li>
                <i class="icon icon-chaxunyue"></i>
                <div class="code">\e608</div>
                <div class="name">chaxunyue</div>
            </li>

            <li>
                <i class="icon icon-xianjin"></i>
                <div class="code">\e625</div>
                <div class="name">xianjin</div>
            </li>

            <li>
                <i class="icon icon-xunzhao02"></i>
                <div class="code">\e730</div>
                <div class="name">xunzhao02</div>
            </li>

            <li>
                <i class="icon icon-renminbi"></i>
                <div class="code">\e692</div>
                <div class="name">renminbi</div>
            </li>

            <li>
                <i class="icon icon-zhichu"></i>
                <div class="code">\e65e</div>
                <div class="name">zhichu</div>
            </li>

            <li>
                <i class="icon icon-handcoins"></i>
                <div class="code">\e60b</div>
                <div class="name">handcoins</div>
            </li>

            <li>
                <i class="icon icon-icon1460188752552"></i>
                <div class="code">\e627</div>
                <div class="name">icon1460188752552</div>
            </li>

            <li>
                <i class="icon icon-icon14"></i>
                <div class="code">\e626</div>
                <div class="name">icon14</div>
            </li>

            <li>
                <i class="icon icon-chongzhi"></i>
                <div class="code">\e62d</div>
                <div class="name">chongzhi</div>
            </li>

            <li>
                <i class="icon icon-zhangdan"></i>
                <div class="code">\e666</div>
                <div class="name">zhangdan</div>
            </li>

            <li>
                <i class="icon icon-zhuanzhang"></i>
                <div class="code">\e63c</div>
                <div class="name">zhuanzhang</div>
            </li>

            <li>
                <i class="icon icon-yue"></i>
                <div class="code">\e746</div>
                <div class="name">yue</div>
            </li>

            <li>
                <i class="icon icon-yinxing"></i>
                <div class="code">\e631</div>
                <div class="name">yinxing</div>
            </li>

            <li>
                <i class="icon icon-dujiayuniconzhenggao-22"></i>
                <div class="code">\e63e</div>
                <div class="name">dujiayuniconzhenggao-22</div>
            </li>

            <li>
                <i class="icon icon-tixian"></i>
                <div class="code">\e62f</div>
                <div class="name">tixian</div>
            </li>

            <li>
                <i class="icon icon-man"></i>
                <div class="code">\e645</div>
                <div class="name">man</div>
            </li>

            <li>
                <i class="icon icon-woman"></i>
                <div class="code">\e647</div>
                <div class="name">woman</div>
            </li>

            <li>
                <i class="icon icon-uniE655"></i>
                <div class="code">\e655</div>
                <div class="name">uniE655</div>
            </li>

            <li>
                <i class="icon icon-uniE66F"></i>
                <div class="code">\e66f</div>
                <div class="name">uniE66F</div>
            </li>

            <li>
                <i class="icon icon-uniE697"></i>
                <div class="code">\e697</div>
                <div class="name">uniE697</div>
            </li>

            <li>
                <i class="icon icon-uniE792"></i>
                <div class="code">\e792</div>
                <div class="name">uniE792</div>
            </li>

            <li>
                <i class="icon icon-tubiao1"></i>
                <div class="code">\e696</div>
                <div class="name">tubiao1</div>
            </li>

            <li>
                <i class="icon icon-dailishang"></i>
                <div class="code">\e698</div>
                <div class="name">dailishang</div>
            </li>

            <li>
                <i class="icon icon-dailishang_1"></i>
                <div class="code">\e699</div>
                <div class="name">dailishang_1</div>
            </li>

        </ul>
    </div>
<script>
var lis=document.querySelectorAll('.iconfont-list li');
for(var i=0;i<lis.length;i++){
	var code=lis[i].querySelectorAll('.code')[0];
	var icon=lis[i].querySelectorAll('i')[0];
	console.log(code.innerText);
	icon.innerHTML='&#x'+code.innerText.substring(1);
}
</script>
</body>
</html>
